<template>
  <h1>用户列表</h1>

  <table border="1">
    <tr>
      <td>ID</td>
      <td>入库时间</td>
      <td>用户名</td>
      <td>密码</td>
      <td>操作</td>
    </tr>
    <tr v-for="user in page.records">
      <td v-text="user.id"></td>
      <td v-text="user.addTime"></td>
      <td v-text="user.userName"></td>
      <td v-text="user.password"></td>
      <td>
        <button @click="del(user.id)">删除</button>
        <button @click="update(user.id)">编辑</button>
      </td>
    </tr>
    <tr>
      <td colspan="5">
        <button @click="goTo(1,10)">首页</button>
        <button @click="goTo(page.current>1?page.current-1:1,10)">上一页</button>
        <button @click="goTo(page.current<page.pages?page.current+1:page.pages,10)">下一页</button>
        <button @click="goTo(page.pages,10)">尾页</button>
      </td>
    </tr>
  </table>


  <router-link to="/users/add">用户添加</router-link><br/>
</template>

<script setup>
import {getData, postData} from "../../js/remote";

let page = $ref({})

const loginToken = localStorage.getItem('token')

function goTo(current,pageSize){
  getData('/user/list',{current:current,pageSize:pageSize,token:loginToken}).then(function (res) {
    if(res.code == 1000){
      page = res.data
    }else{
      alert('登录失败:'+res.msg)
    }
  })
}
goTo(1,10) //一上来调用goTo初始化一页数据



function del(id){
  postData('/user/del/'+id+'/?token='+loginToken).then( (res)=>{
    goTo(1,10)
  } )
}

function update(id){
  // 带查询参数，结果是
  router.push({ path: '/users/add', query: { id: id  } })
}



</script>

<style scoped>



</style>